<template>
  <div class=''>
    <h2>动画</h2>
    <button @click="changeAim">点击切换</button>
    <transition name="fade">
      <h2 v-show="isShow" :style="objStyle">我是一段动画</h2>
    </transition>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
    data() {
    //这里存放数据
      return {
        objStyle:{
          color:'#f00'
        },
        isShow:true
      };
    },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    changeAim(){
      this.isShow = !this.isShow
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
}
</script>
<style lang='scss' scoped>
.fade-enter-active,.fade-leave-active{
  transition: opacity 2s;
}
.fade-enter,.fade-leave-to {
  opacity: 0;
}
// .fade-enter-to,.fade-leave {
//   opacity: 1;
// }
</style>